<template>
	<view class="pageView">
		<u-navbar
			title="订单管理"
			:autoBack="true"
		>
		</u-navbar>
		<view class="tabBlock">
			<u-tabs
			  :list="tabList"
				@click="click"
				lineWidth="18"
				lineColor="#333333"
				:activeStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '30rpx',
					color: '#333333'
				}"
				:inactiveStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '30rpx',
					color: '#999999'
				}"
			></u-tabs>
		</view>
		<view class="litter">
			<scroll-view scroll-x="true" class="litter_view">
				<view
				  v-for="(item, index) in litterList"
					:class="['litter_view_item',litterIndex==index?'litter_view_item1':'']"
					@click="chooseLitter(index)"
					:key="index"
				>
					{{ item }}
				</view>
			</scroll-view>
		</view>
		<view>
			<scroll-view style="width: 100%;height: 76vh;" scroll-y="true">
				<view class="listBlock">
					<view v-for="(item, index) in orderList" :key="index" class="listItem" @click="handleDetail">
						<view class="listItem-headBlock">
							<view class="listItem-headBlock-title">{{ item.title }}</view>
							<view :class="[
								'listItem-headBlock-status',
								item.statusFont=='进行中'?'listItem-headBlock-statusPedding':'',
								item.statusFont=='退款中'?'listItem-headBlock-statusError':''
							]">{{ item.statusFont }}</view>
						</view>
						<u-divider style="margin: 0;margin-top: 16rpx;"></u-divider>
						<view class="listItem-valBlock">
							<view class="listItem-valBlock-title">购买地址</view>
							<view class="listItem-valBlock-val">{{ item.address }}</view>
						</view>
						<view class="listItem-valBlock">
							<view class="listItem-valBlock-title">就诊人</view>
							<view class="listItem-valBlock-val">{{ item.userName }}</view>
						</view>
						<view class="listItem-valBlock">
							<view class="listItem-valBlock-title">手机号</view>
							<view class="listItem-valBlock-val">{{ item.phone }}</view>
						</view>
						<view class="listItem-valBlock">
							<view class="listItem-valBlock-title">服务时间</view>
							<view class="listItem-valBlock-val">{{ item.time }}</view>
						</view>
						<view class="listItem-valBlock">
							<view class="listItem-valBlock-title">特殊需求</view>
							<view class="listItem-valBlock-val">{{ item.remark }}</view>
						</view>
						<u-divider style="margin: 0;margin-top: 16rpx;margin-bottom: 24rpx;"></u-divider>
						<view class="listItem-bottomBlock">
							<button>完成</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				litterIndex: 0,
				tabList: [
					{
						name: '陪诊'
					},
					{
						name: 'VIP定制'
					},
					{
						name: '代办服务'
					},
					{
						name: '陪护'
					},
					{
						name: '影像服务'
					},
					{
						name: '省外'
					}
				],
				litterList: ['全部订单', '进行中', '已完成', '取消/退款'],
				orderList: [
					{
						title: '代取送药',
						statusFont: '进行中',
						address: '北京顺义医院',
						userName: '周莱来',
						phone: '18807141161',
						time: '2024-09-02 9:30-11:30',
						remark: '暂无'
					},
					{
						title: '送取报告',
						statusFont: '进行中',
						address: '北京顺义医院',
						userName: '周莱来',
						phone: '18807141161',
						time: '2024-09-02 9:30-11:30',
						remark: '暂无'
					},
					{
						title: '院内护理',
						statusFont: '进行中',
						address: '北京顺义医院',
						userName: '周莱来',
						phone: '18807141161',
						time: '2024-09-02 9:30-11:30',
						remark: '暂无'
					},
					{
						title: 'CT',
						statusFont: '退款中',
						address: '北京顺义医院',
						userName: '周莱来',
						phone: '18807141161',
						time: '2024-09-02 9:30-11:30',
						remark: '暂无'
					}
				]
			}
		},
		methods: {
			chooseLitter(index) {
				this.litterIndex = index
			},
			handleDetail() {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		background: #F4F4F4;
		.tabBlock{
			margin-top: 180rpx;
			background: #fff;
		}
		.litter{
			width: 100%;
			display: flex;
			height: 110rpx;
			align-items: center;
			background: #fff;
			.litter_view{
				width: 100%;
				white-space: nowrap;
				padding:0 30rpx;
				box-sizing: border-box;
				.litter_view_item{
					display: inline-block;
					padding: 12rpx 24rpx;
					border-radius: 94rpx;
					background: #FFF;
					color: #333;
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 24rpx;
					font-weight: 400;
					margin-right: 20rpx;
					border: 1rpx solid #F4F4F4;
				}
				.litter_view_item1{
					background-color: #0165FB;
					color: #fff;
				}
			}
		}
		.listBlock{
			padding-left: 32rpx;
			padding-right: 32rpx;
			.listItem{
				margin-top: 16rpx;
				width: 622rpx;
				height: 454rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 32rpx;
				&-headBlock{
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #333333;
					}
					&-status{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #FF9D43;
					}
					&-statusPedding{
						color: #FF9D43 !important;
					}
					&-statusError{
						color: #E5432E !important;
					}
				}
				&-valBlock{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 16rpx;
					&-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #333333;
					}
					&-val{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #999999;
					}
				}
				&-bottomBlock{
					display: flex;
					justify-content: flex-end;
					button{
						margin: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 128rpx;
						height: 52rpx;
						background: linear-gradient( 270deg, #0165FB 0%, #7AA7EB 100%);
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
